<template>
	<!-- 添加供应商 -->
	<div class="page" v-loading="loading">
		<el-breadcrumb class="breadcrumb" separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>修改</el-breadcrumb-item>
		</el-breadcrumb>
		<el-form class="content" ref="form" :model="form" status-icon :rules="rules" label-width="120px">
			<el-form-item label="渠道号" prop="supplierChannelNo">
				<el-input size="mini" v-model="form.supplierChannelNo"></el-input>
			</el-form-item>
			<el-form-item label="运营商名称" prop="supplierName">
				<el-input size="small" v-model="form.supplierName"></el-input>
			</el-form-item>
			<el-form-item label="类型" prop="supplierType">
				<el-select size="small" v-model="form.supplierType" filterable placeholder="请选择">
					<el-option v-for="item in typeArr" :key="item.type" :label="item.name" :value="item.type"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="用户等级" prop="level">
				<el-input size="small" v-model="form.level"></el-input>
			</el-form-item>
			<el-form-item label="所在区域">
				<span v-show="!showAddress">{{form.provcity}}<span class="red cursor" @click="updateAddress">修改</span></span>
				<city-three v-show="showAddress" v-on:sendCityData="getCityData"></city-three>
			</el-form-item>
			<el-form-item label="联系人" prop="supplierContacts">
				<add-person v-on:sendPersonData="getPersonData" :sendUpdateData="form.supplierContacts" :type="form.supplierType"></add-person>
			</el-form-item>
			<el-form-item>
				<el-button size="small" type="success" @click="submitForm('form')">确认修改</el-button>
				<el-button size="small" @click="utils.back">取消</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
	import axios from "axios";
	import cityThree from "../../common/cityThree.vue";
	import addPerson from '../../common/addPerson.vue';
	export default {
		name: "add",
		data() {
			return {
				form: {
					supplierChannelNo: "",
					supplierName: "",
					supplierType: "",
					level: "",
					provcity: "",
					supplierContacts: ''
				},
				rules: {
					supplierChannelNo: [{
						required: true,
						message: '渠道号不能为空',
						trigger: 'blur'
					}],
					supplierName: [{
						required: true,
						message: '运营商不能为空',
						trigger: 'blur'
					}],
					supplierType: [{
						required: true,
						message: '类型不能为空',
						trigger: 'blur'
					}],
					level: [{
						required: true,
						message: '用户等级不能为空',
						trigger: 'blur'
					}],
				},
				loading: false,
				city: "",
				typeArr: [{
					type: 'INVESTOR',
					name: '投资人'
				}, {
					type: 'RESTAURANT',
					name: '餐厅'
				}, {
					type: 'SUPPLIER',
					name: '供应商'
				}],
				showAddress: false,
			};
		},
		components: {
			cityThree,
			addPerson
		},
		created() {},
		mounted() {
			this.getDetails();
		},
		methods: {
			// 获取子组件（省市区）数据
			getCityData(data) {
				this.city = data;
			},
			// 获取子组件（联系人）数据
			getPersonData(data) {
				if(data != "") {
					this.form.supplierContacts = data;
				}
			},
			getDetails() {
				this.loading = true;
				this.$post("getDetails", {
					id: this.$route.params.id
				}).then(res => {
					this.loading = false;
					this.form = res.data;
				}).catch((e)=>{
					this.loading = false;
				})
			},
			updateAddress() {
				this.showAddress = !this.showAddress;
			},
			// 修改后保存供应商
			submitForm(formName) {
				this.loading = true;
				this.$refs[formName].validate(valid => {
					if(valid) {
						this.form.provcity = this.city;
						this.$post("supplierSave", this.form).then(res => {
							this.loading = false;
							if(res.code == 200) {
								this.$msg.success("保存成功～");
								this.$router.back();
							} else {
								this.$msg.warning(res.message);
							}
						});
					} else {
						this.$msg.error("网络或服务器错误");
						this.loading = false;
					}
				});
				this.loading = false;
			},
		}
	};
</script>
<style lang="less" scoped>
	.page {
		.content {
			width: 1000px;
			margin: 0 auto;
			.el-input {
				width: 600px;
			}
		}
		.add-data {
			.el-input {
				width: 80%;
			}
		}
	}
</style>